<template>
  <div class="news-container" ref="newsContainer"
       @mouseenter="stopAutoScrolling"
       @mouseleave="startAutoScrolling"
  >
    <div v-for="item in tableData" :key="item.id" :class="getBoxClass(item.isNewsIcon)">
      <div class="news_item">
        <div class="news_icon" v-if="item.isNewsIcon !== null">
          <el-icon :color="getIconColor(item.isNewsIcon)" :size="25">
            <component :is="getIconComponent(item.isNewsIcon)" />
          </el-icon>
        </div>
        <div class="news_content">
          <div class="message_title">{{ item.newsTitle }}</div>
          <p class="message_date">{{ formatDate(item.newsTime) }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import needTools from "@/utils/needTools.js";
import { SuccessFilled, WarnTriangleFilled } from "@element-plus/icons-vue";

export default {
  name: "News",
  components: { SuccessFilled, WarnTriangleFilled },
  data() {
    return {
      tableData: [],
      autoLoadTimerId: null,
      autoScrollTimerId: null,
      autoScrollStep: 5,
      autoScrollDelay: 200,
    };
  },
  created() {
    this.load();
    this.startAutoScrolling();
    this.autoLoadTimerId = setInterval(this.load, 10000);
  },
  beforeDestroy() {
    clearInterval(this.autoLoadTimerId);
    clearInterval(this.autoScrollTimerId);
  },
  methods: {
    formatDate(time) {
      return moment(time, "HH:mm:ss").format("HH:mm");
    },
    load() {
      needTools.get("/newsShow/list", { params: this.params })
          .then(res => {
            if (res.code === 200) {
              this.tableData = res.data.records;
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch(err => {
            console.error("Error fetching data:", err);
            this.$message.error("数据加载失败");
          });
    },
    startAutoScrolling() {
      if (this.autoScrollTimerId) return;
      this.autoScrollTimerId = setInterval(this.scrollContent, this.autoScrollDelay);
    },
    stopAutoScrolling() {
      clearInterval(this.autoScrollTimerId);
      this.autoScrollTimerId = null;
    },
    scrollContent() {
      const newsContainer = this.$refs.newsContainer;
      const { scrollTop, scrollHeight, clientHeight } = newsContainer;
      newsContainer.scrollTop = scrollTop + this.autoScrollStep;
      if (scrollTop + clientHeight >= scrollHeight) {
        newsContainer.scrollTop = 0;
      }
    },
    getBoxClass(isNewsIcon) {
      return isNewsIcon === 0 ? 'false_box' : 'true_box';
    },
    getIconColor(isNewsIcon) {
      return isNewsIcon === 0 ? '#dc1a22' : 'green';
    },
    getIconComponent(isNewsIcon) {
      return isNewsIcon === 0 ? 'WarnTriangleFilled' : 'SuccessFilled';
    }
  }
};
</script>

<style scoped>
.news-container {
  max-height: 560px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.news-container::-webkit-scrollbar {
  display: none;
}

.news_item {
  display: flex;
  flex-grow: 1;
}

.news_icon {
  margin-right: 8px;
}

.news_content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.message_title {
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
  white-space: normal;
  word-wrap: break-word;
}

.message_date {
  text-align: right;
  margin: 4px 5px 0 0;
}
</style>
